<template>
	<main-box id="pay_scheme" :vtitle="title">
		<div class="condition">
			<div class="row_one">
				<el-select v-model="param.studentType" class="select" clearable placeholder="全部学员类型" >
				    <el-option v-for="item in studentTypeList" :key="item.value"
				      		   :label="item.name" :value="item.value">
				    </el-option>
				</el-select>
				<el-select v-model="param.schoolyearId" class="select" clearable placeholder="全部学年" >
				    <el-option v-for="item in schoolYearList" :key="item.schoolYearId"
				      		   :label="item.name" :value="item.schoolYearId">
				    </el-option>
				</el-select>
				<el-select v-model="param.gradeId" class="select" clearable placeholder="全部年级分类" >
				    <el-option v-for="item in gradeTypeList" :key="item.gradeTypeId"
				      		   :label="item.name" :value="item.gradeTypeId">
				    </el-option>
				</el-select>
				<el-select v-model="param.classId" class="select" clearable placeholder="全部班级" >
				    <el-option v-for="item in studentTypeList" :key="item.value"
				      		   :label="item.name" :value="item.value">
				    </el-option>
				</el-select>
				<el-input style="width: 2.5rem;" placeholder="搜索 学员姓名" clearable
	   				 	  v-model="param.keyword" class="input_search" maxlength="100">
	  			</el-input>
	  			&nbsp;
	  			<div class="search_btn" @click="search()">搜索</div>
				
				<div class="right_btn" @click="openSelect()">缴费方案配置</div>
			</div>
		</div>
		<div>
			<table class="table" cellspacing="0">
				<thead class="thead">
					<tr>
						<td style="width:1rem;">
							<div class="check" @click="checkAll(isCheckAll)"
								:class="isCheckAll? 'check_active':''">
								<div>全选</div>
							</div>
						</td>
						<td style="width: 2rem;">孩子</td>
						<td style="width: 2rem;">班级</td>
						<td style="width: 2.5rem;">设置日期</td>
						<td style="width: 5.5rem;">方案概述</td>
						<td style="width: 2rem;">操作</td>
					</tr>
				</thead>
				<tbody class="tbody">
					<tr v-for="item,index in paySchemeList">
						<td>
							<div class="check" @click="checkPayScheme(item.paySchemeId)"
								:class="checkList.indexOf(item.paySchemeId)>-1? 'check_active':''"></div>
						</td>
						<td>{{item.name}}</td>
						<td>{{item.consultationNum}}</td>
						<td>{{item.businessNum}}2018-12-12 18:59:59</td>
						<td>{{item.businessMoney}}</td>
						<td v-if="item.hasScheme">
							<span class="operate_btn" @click="openSet(item)">编辑</span>
							&nbsp;
							<span class="operate_btn" @click="openDetail()">方案详情</span>
						</td>
						<td v-else>
							<span class="operate_btn" @click="openSet(item)">方案配置</span>
						</td>
					</tr> 
				</tbody>
			</table>
		</div>
		<el-pagination
	      layout="total, sizes, prev, pager, next, jumper"
	      :current-page="param.currPage"
	      @size-change="pageSizeChange"
      	  @current-change="pageIndexChange"
	      :total="count">
	    </el-pagination>
	    
		<div class="bottom_btn_div">
			<div class="bottom_btn" @click="openAllot()">批量配置缴费方案</div>
		</div>	
		
		<paySchemeSelect ref="paySchemeSelect" @callback="selectOK"></paySchemeSelect>
		<paySchemeSet ref="paySchemeSet" @callback="closeSet"></paySchemeSet>
		<paySchemeDetail ref="paySchemeDetail"></paySchemeDetail>
	</main-box>
</template>

<script>
	
import paySchemeSelect from './common/pay_scheme_select'
import paySchemeSet from './common/pay_scheme_set'
import paySchemeDetail from './common/pay_scheme_detail'
	
var vm,dict;
export default {
	components : {
		paySchemeSelect, paySchemeSet, paySchemeDetail
	},
	data : function() {
		return {
			title : this.$route.name,
			param : {
				campusId : this.$store.state.campusId,
				studentType: "",
				schoolyearId : "",
				gradeId : "",
				classId : "",
				keyword : "",
				currPage : 1,
				pageSize : 10
			},
			count : null,
	        paySchemeList : [],
	        checkList : [], //选中列表
	        //下拉框数据
	        studentTypeList : [
	        	{value: 1, name: "线索"},
	        	{value: 2, name: "预备生"},
	        	{value: 3, name: "会员"},
	        	{value: 4, name: "在校生"}],
	        schoolYearList : null,
	        gradeTypeList : null
	        
		}
	},
	computed : {
		isCheckAll : function() {
			var len = vm.paySchemeList.length;
			return vm.checkList.length == len && len!=0;
		}
	},
	methods : {
		search : function(currPage) {
			//清空选择列表
	    	vm.checkList = [];
			vm.param.currPage = currPage || 1;
			
			api.paySchemeList(vm.param).then(function(data) {
				vm.paySchemeList = data.list;
				vm.paySchemeList= [{paySchemeId:"1",name:"张三", hasScheme:true},
								   {paySchemeId:"2",name:"李四", hasScheme:true},
								   {paySchemeId:"3",name:"王五", hasScheme:false}];
				vm.count = data.totalCount;
			});
		},
		campusChange : function(campusId) { //校区改变
			vm.param.campusId = campusId;
			vm.search();
			vm.loadList();
		},
		pageSizeChange : function(val) { //页条数发生改变
	  		vm.param.pageSize = val;
	    	vm.search();
	  	},
	  	pageIndexChange : function(val) { //页码发生改变
	    	vm.param.currPage = val;
	    	vm.search(val);
	  	},
	  	checkPayScheme : function(id) {
			//获取勾选列表和当前项的序号
			var c = vm.checkList;
			var index = c.indexOf(id);
			if(index>=0) {
				//如果当前id在已勾选列表,则删除
				c.splice(index,1);
			} else {
				//否则添加
				c.push(id);
			}
		},
		checkAll : function(flag) {
			//清空勾选列表
			vm.checkList = [];
			//如果不是已勾选的,则勾选全部
			if(!flag) {
				vm.paySchemeList.forEach(function(item){
					vm.checkList.push(item.paySchemeId);
				})
			}
				
		},
	  	openDetail : function() {
	  		vm.$refs.paySchemeDetail.init();
	  	},
		openSet : function() {
			vm.$refs.paySchemeSet.init();
		},
		closeSet : function() {
			vm.search();
		},
		openSelect: function() {
			vm.$refs.paySchemeSelect.init();
		},
		selectOK : function() {
			
		},
		loadList : function() {
			let campusId = vm.param.campusId;
			
			api.schoolYearAll({campusId}).then(function(data) {
				vm.schoolYearList = data.list; 
			});
			
			api.gradeTypeAll({campusId}).then(function(data) {
				vm.gradeTypeList = data.list; 
			});
		}
	},
	mounted : function() {
		
	},
	created : function() {
		vm = this;
		//请求列表数据
		vm.search();
		
		vm.loadList();
		
		//获取数据字典对象
		dict = tool.getItem(lsKey.dict,true);
	}
}

</script>

<style lang="scss">
	#pay_scheme {
		.el-input__inner {
			border-radius: 0.08rem;
			font-size: 0.16rem;
			color: #666666;
			height: 0.36rem;
			line-height: 0.36rem;
		}
		.el-input__icon {
			line-height: 0.36rem;
		}
		
		.input_search {
			.el-input__inner {
				background-color: rgb(247,248,250);
			}
		}
	}
</style>
<style scoped src="@/style/module/table.css"></style>
<style scoped>
	.right_btn {
		background-image: none;
		padding: 0;
		text-align: center;
	}
	.select {
		width: 1.6rem;
		margin-right: 0.06rem;
	}
	/*条件*/
	.condition {
		padding-bottom: 0.2rem;
		height: 0.58rem;
	}
</style>